<template>
	<view class="page">
		<view class="top-btn">
			<u-button type="default">
				快速创建
				<u-icon name="plus-circle"></u-icon>
			</u-button>
		</view>
		<view>
			<view v-for="(menu, index) in showMenus" :key="index" class="menu-card">
				<u-card :title="menu.title" :thumb="menu.icon" :thumb-width="40" sub-title-size="30" sub-title-color="#2979ff" :sub-title="menu.type == 'crm' ? '快速创建+' : ''" @head-click="toShowMenu(menu.type)">
					<view slot="body">
						<u-grid :col="5" :border="showBorder" hover-class="true">
							<u-grid-item v-for="(item, $index) in menu.children" :index="$index" :key="$index">
								<view class="grid-item-box" @click.stop="toPath($index, menu)">
									<text class="text">{{ item.title }}</text>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</u-card>
			</view>
		</view>
		<u-popup height="600rpx" v-model="show" mode="bottom" :closeable="true" close-icon-pos="top-right" class="my-popup" border-radius="10" close-icon-color="#c0c4cc" close-icon-size="40">
			<view class="create-menu">
				<view class="menu-title">
					<text>快速创建</text>
				</view>
				<view class="menu-content">
					<view class="menu-item" v-for="(item, index) in showCreateMenu" :index="index" :key="index" @click="pathToCreate(item)">{{ item.title }}</view>
				</view>
			</view>
		</u-popup>
		<u-tabbar :list="vuex_tabbars" class="my-tabbars"></u-tabbar>
	</view>
</template>

<script>
import { sysRouters } from '@/router';

export default {
	data() {
		return {
			show: false,
			showBorder: false,
			quickCreateMenu: [
				{
					title: '客户管理',
					type: 'crm',
					menus: [],
				},
			],
			showCreateMenu: [],
			docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
			showHeight: document.documentElement.clientHeight || document.body.clientHeight,
		};
	},
	computed: {
		showMenus() {
			const menus = sysRouters.length ? sysRouters : [];
			let allAuth = this.vuex_user.allAuth;
			if (allAuth) {
				for (let i = 0; i < menus.length; i++) {
					menus[i].hidden = allAuth[menus[i].type] ? false : true;
					if (menus[i].children && menus[i].children.length && allAuth[menus[i].type]) {
						for (let j = 0; j < menus[i].children.length; j++) {
							menus[i].children[j].hidden = this.showMenuFun(menus, i, j) ? false : true;
						}
					}
				}
			}
			return menus;
		},
	},
	onLoad() {
		//监听事件
		window.onresize = () => {
			return (() => {
				this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
			})();
		};
	},
	onShow() {
		this.init();
	},
	watch: {
		//监听显示高度
		showHeight: function () {
			if (this.docmHeight > this.showHeight) {
				//隐藏
				this.$u.vuex('vuex_keyboardStatus', true);
			} else {
				//显示
				this.$u.vuex('vuex_keyboardStatus', false);
			}
		},
	},
	methods: {
		init() {},

		toShowMenu(type) {
			let self = this;
			let crmAuth = this.vuex_user[type];
			self.showCreateMenu = [];
			switch (type) {
				case 'crm':
					let arr = [];
					arr = self.quickCreateMenu.find((item) => item.type == type).menus;
					arr.map((item) => {
						if (crmAuth[item.subType] && crmAuth[item.subType].save) {
							self.showCreateMenu.push(item);
						}
					});
					self.show = true;
					break;
			}
		},

		pathToCreate(item) {
			let params = {
				crmType: item.subType,
			};
			uni.navigateTo({
				url: item.url + '?params=' + encodeURIComponent(JSON.stringify(params)),
			});
		},

		closeCreateMenu(popup) {
			this.$refs[popup].close();
		},

		toPath(index, menu) {
			let item = menu.children[index];
			if (item.url) {
				uni.navigateTo({
					url: item.url + '?type=' + item.type,
				});
			}
		},

		showMenuFun(menus, i, j) {
			let auto = null;
			if (menus[i].children[j].authType && menus[i].children[j].authType.length) {
				auto = menus[i].children[j].authType.find((item) => this.vuex_user.allAuth[menus[i].type][item]);
			}
			return auto;
		},
	},
};
</script>

<style lang="scss" scoped>
.warp {
	overflow: hidden;
}

.top-btn {
	margin: 15px;
}

.menu-card /deep/ .u-card__head {
	padding: 20rpx !important;
}

.menu-card /deep/ .u-card__body {
	padding: 0 10rpx !important;
}

.menu-card /deep/ .u-grid-item-box {
	padding: 10rpx !important;
}

.grid-item-box {
	flex: 1;
	/* position: relative;
	*/
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px 0;
}

.text {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 22rpx;
	width: 120rpx;
	height: 120rpx;
	border-radius: 5px;
	background-color: #0faeff;
	color: #ffffff;
}

.create-menu {
	position: relative;
	background-color: #ffffff;
	width: 100%;
	min-height: 200px;
	border-radius: 5px 5px 0 0;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.my-popup /deep/ .u-close--top-right {
	top: 20rpx !important;
}

.menu-title {
	text-align: center;
	height: 80rpx;
	font-size: 35rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #efeff4;
}

.menu-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0;
}

.menu-item {
	width: 120rpx;
	height: 120rpx;
	font-size: 22rpx;
	line-height: 120rpx;
	text-align: center;
	background-color: orange;
	color: #ffffff;
	border-radius: 5px;
	margin-right: 10px;
}
</style>
